<template>
    <Wrapper :tab="'/setting/log'">
        <div class="logs-wrapper">
            <a-table
                :dataSource="data?.list"
                :columns="columns"
                :loading="loading"
                :rowKey="record => JSON.stringify(record)"
                @change="handlePageChange"
                :pagination="{
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: data.total,
                }"
            >
                <template #bodyCell="{text, column}">
                    <div v-if="column.key === 'success'">
                        <a-tag :color="text ? 'green' : 'red'"> {{ text ? "成功" : "失败" }}</a-tag>
                    </div>
                    <div v-if="column.key === 'time'">
                        {{ parseTime(text) }}
                    </div>
                </template>
            </a-table>
        </div>
    </Wrapper>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import {reactive} from "vue";
import {useRequest} from "alova/client";
import {getLogs} from "@/api";
import {parseTime} from "@/utils";
import Wrapper from "./components/Wrapper.vue";

let data = reactive<any>({
    list: [],
    total: 0,
    pageSize: 0,
    currentPage: 1,
    isFirstPage: true,
    isLastPage: true,
});

const {send, loading} = useRequest((currentPage = 1, pageSize = 10) => getLogs({pageSize, currentPage})).onSuccess(
    (res: {data: any}) => {
        const {pageSize, pageNum, total, list, isFirstPage, isLastPage} = res.data;
        data.pageSize = pageSize;
        data.currentPage = pageNum;
        data.isFirstPage = isFirstPage;
        data.isLastPage = isLastPage;
        data.list = list;
        data.total = total;
    }
);

const handlePageChange = ({current, pageSize}) => {
    send(current, pageSize);
};

const columns = [
    {
        title: "ID",
        dataIndex: "id",
        key: "id",
    },
    {
        title: "访问用户",
        dataIndex: "accessUser",
        key: "accessUser",
    },
    {
        title: "访问URI",
        dataIndex: "accessUri",
        key: "accessUri",
    },
    {
        title: "是否成功",
        dataIndex: "success",
        key: "success",
    },
    {
        title: "原因",
        dataIndex: "reason",
        key: "reason",
    },
    {
        title: "时间",
        dataIndex: "time",
        key: "time",
    },
];

const dstr = "2024-09-19T13:29:45.000+00:00";
const format = "YYYY-MM-DD HH:mm:ss";
const str = dayjs(dstr).format(format);
console.log("====================================");
console.log("str", str);
console.log("====================================");
</script>
<style scoped lang="less">
.logs-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-top: 40px;
}
</style>
